<template>
  <div class="TDatePicker">
    <a-date-picker
      v-bind="$attrs"
      v-model="innerValue"
      class="w-full"
      :locale="locale"
      show-time
      :dropdownClassName="isShowTime ? 'TDatePickerPopup' : 'TDatePickerPopup TDatePickerPopupItem'"
      :value-format="valueFormat"
      v-on="$listeners"
      @change="handleChange"
    >
      <template #suffixIcon>
        <SvgIcon name="ic-date" class="!h-[16px] !w-[16px]" />
      </template>
    </a-date-picker>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import vModelMixin from "@/mixin/v-model";

export default {
  name: "TDatePicker",
  mixins: [vModelMixin],
  props: {
    //是否显示当前 其他自带的属性都支持(按文档常规使用即可)
    showToday: {
      type: Boolean,
      require: false,
      default: false,
    },
    valueFormat: {
      type: String,
      require: false,
      default: "YYYY-MM-DD HH:mm:ss",
    },
  },
  data() {
    return {
      locale,
    };
  },
  computed: {
    isShowTime() {
      if (this.valueFormat == "YYYY-MM-DD") {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    handleChange(time, timeString) {
      this.$emit("change", time, timeString);
    },
    handleClose() {},
  },
};
</script>

<style lang="scss">
.TDatePickerPopupItem {
  .ant-calendar-time-picker-btn {
    display: none !important;
  }
}

.TDatePickerPopup {
  z-index: 3000;

  .ant-calendar {
    width: 100%;
  }

  .ant-calendar-date {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
  }

  .ant-calendar-today .ant-calendar-date {
    color: #1d7ff2;
    background-color: white;
  }

  .ant-calendar-selected-day.ant-calendar-selected-date .ant-calendar-date,
  .ant-calendar-selected-day.ant-calendar-selected-date .ant-calendar-date:hover {
    color: #fff;
    background: #1d7ff2;
  }

  .ant-calendar-time-picker {
    height: 323px;

    .ant-calendar-time-picker-select,
    .ant-calendar-time-picker-inner,
    .ant-calendar-time-picker-combobox {
      height: 100%;
    }
  }

  .ant-calendar-today-btn {
    color: #1d7ff2;
  }

  .ant-calendar-time-picker-panel {
    height: 100%;
    padding: 12px;

    .ant-calendar-time-picker-select {
      width: 92px;
      border-right: 0;

      ul {
        width: 80px;

        li {
          height: 32px;
          padding: 0;
          margin-top: 8px;
          line-height: 32px;
          text-align: center;
        }
      }
    }
  }

  li.ant-calendar-time-picker-select-option-selected {
    color: #1d7ff2;
    background: #e8f7ff;
    border-radius: 3px;
  }

  .ant-calendar-input:focus {
    border: none;
    box-shadow: none;
  }
}

.ant-calendar .ant-calendar-ok-btn-disabled {
  &,
  &:active,
  &:hover {
    color: #fff;
    background-color: #1d7ff2;
    border: none;
  }
}
</style>
